<template>
     <div class="view-container">
          <!--面包屑 -->
          <el-breadcrumb :separator-icon="ArrowRight">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>
          <el-form :model="form" label-width="40px">
               <!-- 账号和密码 -->
               <el-col :span="6">
                    <el-form-item label="账号">
                         <el-input v-model="login_user" />
                    </el-form-item>
               </el-col>
               <el-col :span="6">
                    <el-form-item label="密码">
                         <el-input v-model="login_password" />
                    </el-form-item>
               </el-col>
               <!-- 职位 -->
               <el-col :span="6">
                    <el-form-item label="职位">
                         <el-input v-model="rola" disabled />
                    </el-form-item>
               </el-col>
               <!-- 用户信息 -->
               <el-col :span="12">
                    <el-form-item label="用户信息">
                         <el-input v-model="user_information" :rows="8" type="textarea" />
                    </el-form-item>
               </el-col>
               <img src="" alt="">
               <!-- 用户头像 -->
               <el-form-item label="头像">
                    <el-upload 
                    :file-list="[{ name: '', url: ReadImageSrc+user_img }]" 
                    action="#" :auto-upload="false"
                    list-type="picture-card"
                         :http-request="false"
                         :on-change="handlePictureCardPreview"
                         :on-preview="handlePreview"
                         :on-remove="handleRemove" limit="1"
                         >
                     
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                         <img w-full style="height: 50vh;" :src="ReadImageSrc+user_img " alt="Preview Image" />
                       </el-dialog>
               </el-form-item>
               <!-- 按钮组 -->
               <el-button type="success" @click="Edit()">编辑</el-button>
               <el-button type="danger" @click="Clear()">清空</el-button>
          </el-form>

     </div>
</template>
<script setup lang="ts">
import {Upload,getBase64,CloseUpload} from '../style.js'
import { ref, reactive, onMounted } from 'vue'
import { getUser } from '../service/Login.js'
import { EditUser } from '../service/User.js'
import { getRola_one } from '../service/Rola.js'
import{ReadImageSrc} from '/src/config.js'


const form = ref()
const dialogVisible =ref(false)

//*用户guid
const guid = ref()
//*账号和密码
const login_user = ref()
const login_password = ref()
//*用户信息
const user_information = ref()
//*用户头像
const user_img = ref()
//*用户职位
const rola = ref()
//*上传文件
const UploadFile = ref()
const UploadName = ref()
const CloseUploadName = ref()

onMounted(() => {
     const data = { guid: localStorage.getItem('Guid'), login_user: localStorage.getItem('User'), login_password: localStorage.getItem('PassWord') }
     getUser(data).then((res) => {
          guid.value = res.data[0].login_guid
          login_user.value = res.data[0].login_user
          login_password.value = res.data[0].login_password
          user_information.value = res.data[1].user_information
          user_img.value = res.data[1].user_img
          rola.value = res.data[0].login_rola_guid
          const rola_data = { rola_guid: rola.value }
          getRola_one(rola_data).then((res) => {
               rola.value = res.data[0].rola_content
          })
     //获取头像
     UploadName.value = res.data[1].user_img
     UploadName.value = UploadName.value.replace('/src/assets/upload/',"")
     })
   
})

//*文件上传成功
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile,fileList) => {
     getBase64(uploadFile.raw).then(res => {
          const params = res.split(',') //*分割类型和base64内容
          UploadFile.value = params[1]
          console.log(uploadFile)
          UploadName.value = uploadFile.name
          const data ={name:uploadFile.name,type:uploadFile.raw.type,size:uploadFile.size,file:params[1]}
          Upload(data)
        })
}
//*文件移除时
const handleRemove =(uploadFile)=>
{
     CloseUploadName.value = uploadFile.name
     const data = {name:CloseUploadName.value}
     CloseUpload(data)
}
//*预览图片
const handlePreview =() =>
{
     dialogVisible.value = true
}


// *清空内容
const Clear = () => {
     login_user.value = null
     login_password.value = null
     user_information.value = null
     user_img.value = null
}
//*编辑内容
const Edit = () => {
     const data = { guid: guid.value, User: login_user.value, Password: login_password.value, Information: user_information.value, Img: UploadName.value }
     EditUser(data)
}

</script>
<style></style>